<template>
    <div id="head">
        <div class="left">
            <slot name="left" />
        </div>

        <div class="right">
            <slot name="right" />
        </div>

    </div>

</template>

<script>
    export default {
        name: "Header",
        data(){
          return{
              keyWord: ''
          }
        },
        components: {

        }
    }
</script>

<style scoped="less">
    h1{
        font-size: 25px;
        font-weight: bold;
        margin-left: 50px;
        margin-top: 30px;
        display: inline-block;
    }
    .right img{
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-right: 5px;
    }
    .right div{
        height: 36px;
        display: inline-block;
    }
    .register{
        line-height: 20px;
        text-align: center;
        margin-right: 10px;
        margin-top: 10px;
        height: 28px;
        position: relative;
        bottom: 1px;
    }
    .register span{
        vertical-align: middle;
    }
    .login i{
        margin-right: 5px;
    }
    .login{
        margin-right: 5px;
    }
    .right{
        text-align: right;
        margin-right: 200px;
        margin-top: -30px;
    }
</style>
